<template>
	<div class="cartcontrol">	
		<move  v-show="food.count>0">
			<div class="cart-decrease iconfont"
			 @click.stop.prevent="handleDecreaseClick"		
			>&#xe611;</div>
		</move>
		<div class="cart-count" v-show="food.count>0">
			{{food.count}}
		</div>
		<div class="cart-add iconfont" @click.stop.prevent="handleAddClick">&#xe60e;</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import move from '../../common/transition/move.vue'
	export default {
		props:{
			food:{
				type:Object			
			}
		},
		components:{
			move
		},
		methods:{
			handleAddClick:function(event){				
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}				
				if(!this.food.count){	
					Vue.set(this.food,'count',1)					
				}else{					
					this.food.count++
				}					
			},
			handleDecreaseClick:function(event){
				if(!event._constructed){//betterscroll 派发的点击事件带了_constructed是为true  浏览器原生的不带这个参数
					return
				}
				if(this.food.count){
					this.food.count--
				}
			}
		},
		created:function(){
			//console.log(this.food)
		}
	}
</script>
<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/index.styl"
	.cartcontrol {
		font-size: 0px;
	}
	.cart-decrease,.cart-add {
		position: relative;
		display: inline-block;
		padding: 6px;
		line-height: 24px;
		font-size: 24px;
		color: rgb(0,160,220);
		transition: all .5s; 		
		z-index:0;
	}
	.cart-count {
		display: inline-block;
		font-size: 10px;
		vertical-align: top;
		width: 12px;
		padding-top: 6px;
		line-height: 24px;
		text-align: center;
		color: rgb(147,153,159);
	}
	.cart-add {
		position: relative;
		z-index:1;
	}	
</style>